{extend name="index/public" /}

{block name="content"}
<div style="height: 830px;">
    <div class="layui-row">
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                今日平台新增<br />
                <div class="box1-pad-num t_num1 t_num"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                今日游戏新增<br />
                <div class="box1-pad-num t_num2 t_num"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1">
            <div class="box1-pad">
                今日游戏活跃<br />
                <div class="box1-pad-num t_num3 t_num"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                今日付费金额<br />
                <div class="box1-pad-num t_num4 t_num"></div>
            </div>
        </div>
    </div>
    <div class="layui-row">
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                过去一周日均平台新增<br />
                <div class="box1-pad-num week1"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                过去一周日均游戏新增<br />
                <div class="box1-pad-num week2"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                过去一周日均游戏活跃<br />
                <div class="box1-pad-num week3"></div>
            </div>
        </div>
        <div class="layui-col-md3 box1" >
            <div class="box1-pad">
                过去一周日均付费金额<br />
                <div class="box1-pad-num week4"></div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="css"}
<style>
    .box1 {padding:20px 10px; text-align: center;}
    .box1-pad {padding: 40px 10px; background: #fff; color: #222;-moz-box-shadow:0px 0px 14px #C4C4C4; -webkit-box-shadow:0px 0px 14px #C4C4C4; box-shadow:0px 0px 14px #C4C4C4; border-radius: 10px;}
    .box1-pad-num {color: #444; margin-top: 15px; font-size: 28px; height: 32px;}
    .t_num i { width: 15px; height: 23px; display: inline-block; background: url(__STATIC__/js/fliptimer/number.png) no-repeat; background-position: 0 0; text-indent: -999em;}
</style>
{/block}

{block name="js"}
<script src="__STATIC__/js/fliptimer/jquery-2.0.3.min.js"></script>
<script src="__STATIC__/js/fliptimer/backgroundPositionAnimate.js"></script>
<script>
    timeInt = function () {
        $.post('{:url("Index/today")}', {}, function(json){
            show_num(json.plat_add, 1);
            show_num(json.game_add, 2);
            show_num(json.game_active, 3);
            show_num(json.pay_money, 4);
        }, 'JSON');
    };

    var setTime = setInterval(timeInt, 5000);//每隔5秒执行一次

    window.clearTime = function(){
        clearInterval(setTime);
    }
    window.openTime = function(){
        timeInt();
        setTime = setInterval(timeInt, 5000);
    }

    $.post('{:url("Index/today")}', {}, function(json){
        show_num(json.plat_add, 1);
        show_num(json.game_add, 2);
        show_num(json.game_active, 3);
        show_num(json.pay_money, 4);
    }, 'JSON');

    $.post('{:url("Index/week")}', {}, function(json){
        $('.week1').html(json.plat_add);
        $('.week2').html(json.game_add);
        $('.week3').html(json.game_active);
        $('.week4').html(json.pay_money);

    }, 'JSON');

    function show_num(n,index){
        var it = $(".t_num"+index).find('i');
        var len = String(n).length;
        for(var i=0;i<len;i++){
            if(it.length<=i){
                $(".t_num"+index).append("<i></i>");
            }
            var num=String(n).charAt(i);
            var y = -parseInt(num)*30; //y轴位置
            var obj = $(".t_num"+index).find('i').eq(i);
            obj.animate({ //滚动动画
                    backgroundPosition :'(0 '+String(y)+'px)'
                }, 'slow','swing',function(){}
            );
        }
    }

    layui.use('table', function(){
        var $ = layui.$;
        $('#layui-loading').hide();
    });
</script>
{/block}